<template>
  <div class="login-particalGround">
    <div class="login-container">
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
        style="height:100%"
      ></vue-particles>
      <div style="display: flex; justify-content: center; margin-top: 150px">
        <el-card style="width: 400px" class="login-box">
          <div slot="header" class="clearfix">
            <h3 class="login-title" style="justify-content: center">
              家族族谱管理系统登陆
            </h3>
          </div>
          <table class="login-title" style="justify-content: center">
            <el-dialog class="dialog" :visible.sync="dialog" title="注册家族成员" style="justify-content: center" @close="notRegister">
              <el-form :model="newUser" :rules="rules" ref="newUser">
                <el-form-item label="成员编号" prop="sno">
                  <el-input v-model="newUser.sno" placeholder="成员编号" size="medium" prefix-icon="el-icon-s-custom" maxlength="10" show-word-limit clearable></el-input>
                </el-form-item>

                <!--                <el-form :model="newUser" :rules="rules" ref="ruleForm">-->
                <el-form-item label="姓名" prop="sname">
                  <el-input v-model="newUser.sname" placeholder="姓名" size="medium" prefix-icon="el-icon-user-solid" maxlength="50" show-word-limit clearable></el-input>
                </el-form-item>

                <!--                <el-form :model="newUser" :rules="rules" ref="ruleForm">-->
                <el-form-item label="出生日期" prop="sdate">
                  <el-input v-model="newUser.sdate" placeholder="出生日期，如20000101" size="medium" prefix-icon="el-icon-date" maxlength="50" show-word-limit clearable></el-input>
                </el-form-item>

                <!--                <el-form :model="newUser" :rules="rules" ref="ruleForm">-->
                <el-form-item label="密码" prop="spassword">
                  <el-input type="password" v-model="newUser.spassword" placeholder="密码不少于6位" size="medium" prefix-icon="el-icon-lock" minlength="6" maxlength="20" show-word-limit show-password clearable></el-input>
                </el-form-item>

                <!--                <el-form ref="ruleForm">-->
               
                <el-button-group>
                  <el-button type="success" @click="doRegister('newUser')" icon="el-icon-check">注册</el-button>
                 
                  <el-button type="warning" @click="reset('newUser')" icon="el-icon-refresh">重置</el-button>
                </el-button-group>
                <el-button-group>
                
                  <el-button type="danger" @click="notRegister" icon="el-icon-close">取消</el-button>
                </el-button-group>

              </el-form>
            </el-dialog>
            <tr>
              <td class="login-title" style="justify-content: center">
                成员编号
              </td>
              <td>
                <el-input v-model="user.sno" placeholder="请输入学号" size="medium" prefix-icon="el-icon-s-custom" maxlength="10" show-word-limit clearable></el-input>
              </td>
            </tr>
            <tr>
              <td class="login-title" style="justify-content: center">
                密码
              </td>
              <td>
                <el-input type="password" v-model="user.spassword" placeholder="请输入密码" @keydown.enter.native="doLogin" size="medium" prefix-icon="el-icon-lock" minlength="6" maxlength="20" show-word-limit show-password clearable></el-input>
              </td>
            </tr>
            <tr>
              <td class="login-title" style="justify-content: center">
                身份
              </td>
              <td>
                <el-radio v-model="type" :label="1" border>管理员</el-radio>
                
              <!--   <el-radio v-model="type" :label="2" border>游客</el-radio> -->
              
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <Vcode :show="isShow" @success="success" @close="close"></Vcode>
                <table>
                  <el-button style="width: 300px" type="danger" @click="submit" :round="true" icon="el-icon-question" :disabled=this.right>点击进行人机验证</el-button>
                </table>
                <table>
                  <el-button style="width: 300px" type="success" @click="doLogin" :round="true" icon="el-icon-user">登录</el-button>
                </table>
               
               
              </td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import Vcode from 'vue-puzzle-vcode';
export default {
  name: "Login",
  data() {
    return {
      user:{
        sno:'',
        sname:'',
        sdate:'',
        spassword:'',
        samount:'',
      },
      newUser:{
        sno:'',
        sname:'',
        sdate:'',
        spassword:'',
        samount:'',
      },
      rules:{
        sno:{required:true, message:'请输入成员编号', trigger:'blur'},
        sname:{required: true, message: '请输入姓名', trigger: 'blur'},
        sdate:{required: true, message: '请输入出生日期', trigger: 'blur'},
        spassword:{required: true, message: '请输入密码', trigger: 'blur'},
      },
      type: 2,
      isShow: false,
      right: false,
      dialog: false,
    }
  },
  components:{
    Vcode
  },
  methods : {
    // doLogin() {
    //   const _this = this;
    //   if (_this.user.username === 'admin' && _this.user.password === '123') {
    //     console.log("密码正确");
    //     const api = 'http://localhost:8081/StudentLogin'
    //     this.axios.post(api, {...this.user}).then(res=>{
    //       // 保存token
    //
    //       // 跳转学生主页
    //     })
    //     if ("1" === _this.user.type) {//管理员方式
    //       _this.$router.push({path:'/'});
    //     } else {
    //       _this.$router.push({path:'/choose'});
    //     }
    //   } else {
    //     _this.$alert('账号或密码错误', '警告', {
    //         confirmButtonText:'确认',
    //       })
    //   }
    // }
    submit(){
      this.isShow = true;
    },
    success(msg){
      this.isShow = false;
      this.right = true;
    },
    close() {
      this.isShow = false;
      this.right = false;
    },
    doLogin(){//一点击登录按钮，这个方法就会执行
      //alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      if (this.right == false) {
        alert("请先进行人机验证！");
      } else {
        localStorage.setItem("type", this.type);
        localStorage.setItem("stuno", 1);
        const  _this = this;
        console.log("type:", this.type)
        if (this.type === 1) {
          console.log("管理员信息", this.user.sno, this.user.sname, this.user.sdate, this.user.spassword, this.user.samount)
          this.$axios.post(`/LoginManager`,{...this.user}).then((res) => {
            console.log(res.data);
            console.log("3333")
            if(res.data.msg=="登陆成功" || res.data.msg=="使用Redis登陆成功"){
              console.log("进入if");
              _this.$router.push({path:'/Add',query:_this.user}).catch(err => err);
            }else{

                //console.log("账号密码错误");
                alert(res.data.msg);


            }
          })
        } else {
          console.log("游客信息", this.user.sno, this.user.sname, this.user.sdate, this.user.spassword, this.user.samount)
          this.$axios.post(`/LoginStudent`,{...this.user}).then((res) => {
            console.log(res.data);
            console.log("1111")
            if(res.data.msg=="登陆成功"){
              console.log("进入if");
              _this.$router.push({path:'/ChooseRelation',query:{}}).catch(err => err);
            } else if (res.data.msg=="学号不能为空") {
              alert("学号不能为空");
            } else if (res.data.msg=="密码不能少于6位") {
              alert("密码不能少于6位");
            } else if (res.data.msg=="用户不存在") {
              alert("用户不存在");
            } else if (res.data.msg=="密码错误") {
              alert("密码错误");
            } else {
              //console.log("账号密码错误");
              alert("token发放失败");
            }

          });
        }
      }
    },
    showDialog() {
      this.dialog = true;
    },
    notRegister() {
      this.newUser.sno = '';
      this.newUser.sname = '';
      this.newUser.sdate = '';
      this.newUser.spassword = '';
      this.newUser.samount = '';
      this.dialog = false;
    },
    doRegister(student) {//注册学生
      //this.dialog = true;
      const _this = this;
      this.$refs[student].validate((valid) => {
        if (valid) {
          console.log(_this.newUser)
          const params = {
            sno:_this.newUser.sno,
            sname:_this.newUser.sname,
            sdate:_this.newUser.sdate,
            spassword:_this.newUser.spassword,
            samount:_this.newUser.samount,
          };
          console.log("参数："+params.sno+params.sname+params.sdate+params.spassword+params.samount);
          this.$axios.post(`/InsertStudent`, {...params}).then(res => {
            console.log(res);
            if (res.data.msg == "注册成功！") {
              alert("注册成功！")
              this.dialog = false;
              this.newUser.sno = '';
              this.newUser.sname = '';
              this.newUser.sdate = '';
              this.newUser.spassword = '';
              this.newUser.samount = '';
            } else {
              alert(res.data.msg)
            }
          })
        }
      })

    },
    reset(roleForm) {
      this.$refs[roleForm].resetFields();
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}
.login-particalGround {
  background-image: linear-gradient(-180deg, #db81c1 0%, #27257f 100%);
  background-repeat: no-repeat;
  background-size: auto;
  height: auto;
  /*position: relative;*/
  /*background-image: url("./static/background.jpg");*/
}
.login-box {
  border: 1px solid #4272b9;
  width: 350px;
  margin: 50px auto;
  padding: 35px 35px 35px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #2ca7ab;
}
.login-title {
  text-align: center;
  margin: 0 auto auto auto;
  color: #303133;
}
</style>
